.list_box {
  width: 100vw;
  height: 100vh;
  position: relative;
  box-sizing: border-box;



  //列表上部分 
  .list_top_box {
    width: 100%;
    height: 12vh;
    // background: url('../../img/f3.jpg') no-repeat center;
    padding: 4vw;
    display: flex;


    .list_top_loca {
      flex: 1;
    }

    .list_top_input {
      flex: 4;

      input {
        width: 100%;
        outline: none;
        height: 4vh;
        border-radius: 10vw;
        text-indent: 2em;
      }
    }
  }

  // 店铺表头
  .store_list_top {
    height: 20vh;
    padding: 2vw 2vw;

    .store_list_top_span {
      position: fixed;
      z-index: 9;
      top: 5vw;
      left: 5vw;
      background-color: rgba(0, 0, 0, 0.233);
      display: block;
      width: 10vw;
      height: 10vw;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 5vh;
    }

    h2 {
      position: relative;
      font-size: 3vw;

      span {
        font-weight: bold;
        margin-right: 3vw;
        font-size: 6.4vw;
      }

      .store_list_top_collect {
        position: absolute;
        right: 2vw;
        color: rgb(119, 119, 119);
      }

      .store_list_top_collect1 {
        position: absolute;
        right: 2vw;
        color: rgb(255, 0, 0);
      }
    }

    p {
      color: rgb(119, 119, 119);
      margin: 0;
    }

  }

  // 列表下部分
  .list_btm_box {
    width: 100%;
    height: calc(100vh - 20vh);
    overflow-y: hidden;
    background: rgb(252, 252, 252);
    position: absolute;
    border-radius: 2vw 2vw 0 0;

    // 左侧导航
    .list_btm_left {
      // float: left;
      width: 25vw;
      background: #f0f0f0;
      height: 100%;
      overflow-y: auto;
      position: absolute;
      top: 0;
      left: 0;
      color: #a2a2a2;



      // 列表每一个
      .list_btm_left_every {
        width: 100%;
        line-height: 6vh;
        text-align: center;

        &.list_btm_every_active {
          color: rgb(0, 0, 0);
          background-color: #fff;
        }
      }
    }

    // 右侧内容列表
    .list_btm_right {
      // float: left;
      width: calc(100vw - 25vw);
      // margin-left: 25vw;
      height: 95%;
      overflow-y: auto;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 25vw;

      // 轮播图
      .list_btm_right_banner {
        // width: calc(100vw - 25vw);
        padding: 2vw;
        height: 14.5vh;
        margin-bottom: 5vw;

        img {
          width: 100%;
          height: 14.5vh;
        }
      }

      .list_btm_right_every_box {
        box-sizing: border-box;
        padding: 5vw 2vw 5vw 4vw;
        width: 100%;

        h3 {
          font-weight: bold;
          margin: -5vw 0;
          color: #858585;
        }

        .list_btm_right_every {
          display: flex;
          margin-top: 10vw;

          .list_btm_right_every_img {
            flex: 1;
            // text-align: center;
            line-height: 16vh;

            img {
              width: 20vw;
              height: 20vw;
            }
          }

          .list_btm_right_every_cont {
            flex: 2;

            p {
              margin-top: 1vh;
            }

            .list_btm_right_every_cont_name {
              font-weight: bold;
              font-size: 4.5vw;
            }

            .list_btm_right_every_cont_mess {
              // 多行文字省略
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;

              max-width: 45vw;
              margin-top: 5vw;
              color: #707070;
            }

            p {
              margin: 0;
              padding: 0;
            }

            .list_btm_right_every_cont_price {
              position: relative;
              margin-top: 8vw;

              .list_btm_right_every_cont_pr {
                font-size: 4.5vw;
                font-weight: bold;
              }

              .list_btm_right_every_cont_spec {
                position: absolute;
                right: 4vw;
                top: 0;
                padding: 1vw 4vw;
                border: 0.1vw solid black;
                border-radius: 10vw;
                background-color: black;
                color: #fff;
              }

              .list_btm_right_every_cont_pan {
                position: absolute;
                right: 4vw;
                top: -20vw;
                font-size: 10vh;
                color: rgb(201, 201, 201);
              }
            }
          }
        }
      }

    }
  }
}

// 背景遮罩层
.shopcar_zz {
  opacity: 0;
  transition: all .3s linear;
  z-index: 2;
}

.shop_car {
  width: 100%;
  min-height: 4rem;
  max-height: 70vh;
  border-radius: .266667rem .266667rem 0 0;
  background: white;
  position: fixed;
  bottom: -100%;
  z-index: 18;
  transition: all .3s ease-in-out;
  background: linear-gradient(to bottom, white 80%, rgba(255, 255, 255, .5));
}